<!--
 * @Description: In UserInfo Settings Edit
 * @Author: your name
 * @Date: 2019-08-08 09:42:10
 * @LastEditTime: 2019-09-30 15:45:33
 * @LastEditors: Please set LastEditors
 -->
<template>
    <view>  
        <div class="iscog" v-if="offShow">
            <official-account></official-account>
            <img src="/static/images/close_default.png" alt="" @click="closeOff">
        </div>
        <!-- 头部位置 -->
        <view class="faidel">
            <span 
                v-for="(infos,index) in topList" 
                :key="index"
                :style="{background:infos.colors,color:infos.texColor}"
                :data-i_bs="infos.I_b" 
                :data-bsh="infos.tagCode"
                @click="topClick" 
                >
                {{infos.common}}
            </span>
        </view>


        <div title="" v-for="(item,index) in washnumber" :key="index"  id="txt_list" _pid="_pid">
            <view :data-zcoty="item" @click="newty">
                <!-- 用户 -->
                <view class="title_user">
                    <image :src="item.custImg" class="titie_img"></image>
                    <view class="tem_cotny" :class="[item.infoType == 5?'alwos':'']">
                        {{item.custNname}}
                    </view>
                    <!-- 信息类型 -->
                    <span 
                        v-if="item.tagsList[0]"
                        class="classIndex"
                        :data-i_bs="item.tagsList[0].uid" 
                        :data-bsh="item.tagsList[0].tagCode"
                        @click="topClick">
                        {{item.tagsList[0].tagName}}
                    </span>

                </view>
                
                <!-- 信息详情 -->
                <view class="content">
                    <view class="hander_txt">
                        <!-- 是否火热 -->
                        <img v-if="item.isHot == 1" src="/static/images/hot.png"/>
                        
                        <!-- 信息标题 -->
                        <text class="all_txt">{{item.title}}</text>
                    </view>
                    <div line="2" _pid="_pid" class="desc">{{item.infoDesc}}</div>
                    <image  v-if="item.infoType == 2" mode="aspectFill" :src="item.fileList[0].fileUrl" class="wx_img" @click.stop="bigImg" :data-src="item.fileList[0].fileUrl"></image>
                     <video v-if="item.infoType == 3" :src="item.fileList[0].fileUrl" class="viidews" @click.stop="viidews" style="height: 392rpx;"></video>
                    <view class="wx_btn">
                        <view class="txt_one">
                            <text>{{item.shortTime}}</text>
                        </view>
                        <view class="txt_two">
                            <img  data-operation="toComment" v-if="item.isGood == 0" src="/static/images/noYu.png" style="position:relative;top:2px"/>
                            <img  data-operation="toComment" v-else src="/static/images/6c94186b13163ead1680ea4d5ea459e.png" style="position:relative;top:2px"/>
                            <text  data-operation="toComment" style="margin-right:20rpx">{{item.goodS||0}}</text>
                            <img @click="discuss" data-operation="toComment" src="/static/images/pinglun_icon_focus.png" style="position:relative;top:2px"/>
                            <text @click="discuss" data-operation="toComment">{{item.commentS}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </div>
    </view> 
</template>



<script>
import apis from '../../utils/apiC'
import utily from '../../utils/utliyC'
export default {
    data(){
        return {
            "__code__": {
                readme: ""
            },
            userId:'',
            topList:[],
            washnumber: [],
            offset: 0,
            limit: 10,
            num: 1,
            bshs: '',
            imgUrl: '',
            miny: false,
            offShow:true
        }
    },
    onLoad:function(){
        this.imgUrl = apis.domainy;
        this.bshs = '';
        this.washnumber= [];
        this.offset = 0;
        let userId = wx.getStorageSync('userInfo').userId;
        this.$set(this,'userId',userId)
        this.getTagList()
        this.getWashNumber()
    },
    methods:{
        closeOff(){
            this.$set(this,'offShow',false)
        },
        // 点赞和去取消
        basically(e){
            utily.ismoty(e.currentTarget.dataset.uid,this, 1);
        },
        // 大图
        bigImg(e){
            var src = e.currentTarget.dataset.src;
            var imgArr = [];
            imgArr.push(src);
            wx.previewImage({
            current: src, // 褰撳墠鏄剧ず鍥剧墖鐨刪ttp閾炬帴
            urls: imgArr // 闇€瑕侀瑙堢殑鍥剧墖http閾炬帴鍒楄〃
            });
        },
        // 点击tagList
        topClick(e){
            var listss = this.topList;
            var I_bs = e.currentTarget.dataset.i_bs;
            var bshs = e.currentTarget.dataset.bsh;
            this.$set(this,'bshs',bshs)
            for (var i = 0; i < listss.length; i++) {
            if (listss[i].I_b == I_bs) {
                listss[i].colors = "#E94A69";
                listss[i].texColor = "#fff";
            } else {
                listss[i].colors = "#FFF";
                listss[i].texColor = "#E94A69";
            }
            }
            this.$options.onPullDownRefresh[0](this);
            this.$set(this,'topList',listss)
        },
        // 点击新闻或者活动进入详情
        newty(e){
            // utily.jump.loginPage()
            var operation = e.currentTarget.dataset.operation || undefined;
            var mewtimes = e.currentTarget.dataset.zcoty.createTime;
            if (e.currentTarget.dataset.zcoty.infoType == 4) {
                wx.navigateTo({
                    url: "../outPage/main?inur=" + encodeURIComponent(JSON.stringify({ ur:e.currentTarget.dataset.zcoty.webUrl})) + "&timew=888999" 
                });
            } else {
                wx.navigateTo({
                    url: "../detail/main?formPage=1"+"&teeny="+ e.currentTarget.dataset.zcoty.uid + "&userid=" + this.userId + "&isGood=" + e.currentTarget.dataset.zcoty.isGood + "&comments=" + e.currentTarget.dataset.zcoty.commentS + "&operation=" + operation
                });
            }
        },
        // 拨打电话
        temble(e) {
            wx.makePhoneCall({
                phoneNumber: e.currentTarget.dataset.number
            });
        },
        // 获取tag列表
        getTagList(){
            const _this = this 
            apis.tagList('post',{
                tagType:1,
                tagStatus:1,
                // userId:_this.userId
            },function(res){
                var datass = res.data.data;
                var listss = [];
                var datasss = { common: "全部", colors: "#E94A69", texColor: "#fff", I_b: 0, tagCode: "" };
                listss.push(datasss);
                for (var i = 0; i < datass.length; i++) {
                    datass[i].colors = "";
                    datass[i].texColor = "#E94A69";
                    datass[i].I_b = datass[i].uid;
                    datass[i].common = datass[i].tagName;
                    listss.push(datass[i]);
                }
                _this.$set(_this,'topList',listss)
            })
        },
        getWashNumber(){
            const _this = this
             apis.list('post',{
                tagCode:_this.bshs,
                infoType:'',
                formUserId:'',
                toUserId:'',
                limit:_this.limit,
                offset:_this.offset,
                userId:_this.userId
            },function(res){
                var res = res.data.data;
                _this.$set(_this,'offset',_this.offset+_this.limit)
                _this.washnumber.push(...res)
                _this.$set(_this,'washnumber',_this.washnumber)
            })
        }

    },

    onShow(_this=this){
        
    },

    watch:{
        washnumber(value){
            value.forEach(item=>{
                if(item.hasOwnProperty('fileList')){
                    item.fileList.forEach(fileItem=>{
                        if(!(fileItem.fileUrl.includes('http://')||fileItem.fileUrl.includes('https://'))){
                            fileItem.fileUrl=this.imgUrl+fileItem.fileUrl
                        }
                    })
                }
            })
        }
    },

    onPullDownRefresh(_this=this){
        _this.$set(_this,'washnumber',[])
        _this.$set(_this,'offset',0)
        _this.getWashNumber()
        wx.stopPullDownRefresh();
    },
    onReachBottom(_this=this){
        _this.getWashNumber()
    },
    onShareAppMessage() {
        return {
            title: '洗车用同洗',
            path: '/pages/home/index'
        };
    }
}
</script>



<style lang="less">
page{
    background:#fff;
    
    .hrDiv{
        height:0px;
        border-top:1px solid #c8c8c8;
    }
} 
.container {
    width: 100%;
}
.input-wrap {
background: #fff;
}
.content {
padding-left: 30rpx;
padding-right: 30rpx;
}
.content .desc{
    font-size: 30rpx;
    color:#070707;
    line-height:38rpx;
    // text-indent:30px;

}
.wx_img{width:320rpx;height: 238rpx;margin-top: 12rpx}
.wx_btn .txt_one{display: inline-block; color:#afafaf}
.wx_btn .txt_two{display: inline-block;float:right;font-size:28rpx;color:#1a1a1a;}
.wx_btn .txt_two image{width: 30rpx;height: 30rpx;}
.viidews{width:100%;margin-top: 22rpx;}

.faidel{
    background:#fff;
    margin: 23px 10px 0;
    box-sizing:border-box;
    border-bottom:1px solid #dcdcdc;
    span{
        display: inline-block;
        width:126rpx;
        height:42rpx;
        border:1rpx solid red;
        text-align:center;
        line-height:43rpx;
        border-radius:10rpx;
        font-family:"PingFang";
        font-size: 28rpx;
        color: #e94a69;
        vertical-align:top;
        margin-bottom:35rpx;
        margin-right:20rpx;
        box-sizing: border-box;
        &:nth-child(5n){
            margin-right:0px;
        }
    }
}
// .active{background:red;}
#txt_list{
    border-bottom:1px solid #dcdcdc;
    padding: 46rpx 10px 0;
    box-sizing:border-box;
    .title_user{
        // margin-top: 30rpx;
        font-size: 28rpx;
        color: #686868;
        .titie_img{
            width: 78rpx;
            height: 78rpx;
            border-radius:50%;
            margin-right: 20rpx;
            margin-left: 30rpx;
            // margin-bottom: 20rpx;
            vertical-align:top;
        }
        .tem_cotny{
            display:inline-block;
            line-height:80rpx;
            font-size:30rpx;
            color:#686868;
            text{
                display:block;
                width:100%;
                font-size:25rpx;
            }
        }
        .classIndex{
            display:inline-block;
            height:46rpx;
            border:2rpx solid #afafaf;
            text-align:center;
            line-height:46rpx;
            border-radius:3rpx;
            font-family:'PingFang';
            font-size:30rpx;
            float:right;
            width:136rpx;
            color:#afafaf;
            box-sizing:border-box;
            margin-top:16rpx;

        }
        .alwos{
            margin-top: 19rpx;
        }
        .temble{
            float:right;
            margin-right:32rpx;
            display:inline-block;
            width:108rpx;
            height:44rpx;
            text-align:center;
            line-height: 44rpx;
            border:1rpx solid #E94A69;
            border-radius:10rpx;
            color: #E94A69;}
    }
}
.content .wx_btn{margin: 22rpx 0 34rpx 0;font-size: 28rpx;color:rgb(105, 103, 103);}



/* // .content .wx_img{height: 210rpx;width: 210rpx;}  */
.hander_txt{margin-bottom: 28rpx;position:relative;}
.hander_txt .all_txt{font-weight: bold;margin-left: 10rpx;font-family:"PingFang";font-size: 30rpx;margin-left:100rpx;}
.hander_txt .titie_txt{font-size: 25rpx;margin-top:30rpx;border:1rpx solid #E94A69;height: 28rpx;}
.hander_txt image{width: 30rpx;height: 35rpx;position:absolute;left:56rpx;top:13rpx;}
.content .wx_btn{color: #000;font-family: 'PingFang'} 
.content .wx_btn .zn{margin-right: 60rpx;}
.content .wx_btn image{margin-right: 12rpx;width: 34rpx;height: 34rpx;vertical-align: top;}
.mewcwe{width: 100%;border: 1rpx solid #ccc;width: 90%;margin: 0 auto;border-radius: 15rpx;padding: 15rpx 0 15rpx 0;}
.mewcwe view view{display: inline-block;width: 450rpx;}
.mewcwe view view view{margin-bottom: 20rpx;font-size: 24rpx;color: #070707;display: block;}
.mewcwe view .titie_img{width: 78rpx;height: 78rpx;border-radius:50%;margin-right: 20rpx;margin-left: 30rpx;vertical-align:top;}
.mewcwe view .ky_dv{width: 42rpx;height: 36rpx;vertical-align:top;margin-top: 20rpx;}
.mewcwe .mewcwebox{width: 100%;margin-left: 0;}
.mewcwe .mewcwebox view{margin: 0;width: 49%;height: 60rpx;line-height: 60rpx;text-align: center;display: inline-block;}
.mewcwe .mewcwebox view image{width: 34rpx;height: 32rpx;margin-right: 12rpx;vertical-align: middle;}
.mewcwe .mewcwebox view text{margin-right: 12rpx;vertical-align: middle;}
.product{width: 100%;background: red;}
.product .productone{width: 100%;}
.product .productone image{width: 100%;height: 207rpx;}
// .costy{position: fixed;top:850rpx;right: 60rpx;border-radius:50%;box-shadow: 0 15rpx 20rpx rgba(233,74,105,0.4);width:98rpx;height:98rpx;}
// .costy image{width: 98rpx;height: 98rpx;}
/* page>view .discussty_box{position: fixed;z-index:10;background: rgba(0,0,0,0.2);width: 100%;height: 100%;} */
.discussty{position: fixed;bottom: 0;width: 100%;height: 100%;z-index: 10;background: rgba(0, 0, 0, 0.5);}
.discussty .discussty_box{position: fixed;bottom: 0;width: 100%;height: 500rpx;background: #fff;z-index: 15;}
.discussty textarea{width: 90%;height: 400rpx;margin: 0 auto;background: #eee;}
/* .content .wx_btn */

.iscog{
    display: none;
    img{
        width: 40rpx;
        height:40rpx;
        position: absolute;
        right: 60rpx;
        top:20rpx;
    }
    
  }


</style>
